<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inspinia 2.9.2 | 拖动面板</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <link href="css/style.css" rel="stylesheet">
</head>

<body>

        <div class="wrapper wrapper-content  animated fadeInRight">
            <div class="layui-row layui-col-space20" id="sortable-view">
                <div class="layui-col-md8">
                    <div class="ibox ">
                        <div class="ibox-title">
                            <h5>拖放</h5>
                            <div class="ibox-tools">
                                <label class="label label-primary">这是一个可以拖放的盒子</label>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <h2>
                                标题 1
                            </h2>
                            <p>
                                一捧香土藏奇葩，孕育种子发新芽，寄托情思千万里，一年四季绘新画；一滴细雨催鲜花，雨过天晴景色佳，朵朵相思满枝桠，千丝万缕放光华；一条短信给你发，祝你开心美潇洒，生日快乐伴随你，高枕无忧爱融洽！一捧香土藏奇葩，孕育种子发新芽，寄托情思千万里，一年四季绘新画；一滴细雨催鲜花，雨过天晴景色佳，朵朵相思满枝桠，千丝万缕放光华；一条短信给你发，祝你开心美潇洒，生日快乐伴随你，高枕无忧爱融洽！
                            </p>
                        </div>
                    </div>
                    <div class="ibox ">
                        <div class="ibox-title">
                            <h5>拖放</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i class="fa fa-wrench"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-user">
                                    <li><a href="#" class="dropdown-item">选项 1</a>
                                    </li>
                                    <li><a href="#" class="dropdown-item">选项 2</a>
                                    </li>
                                </ul>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <h2>
                                标题 3
                            </h2>
                            <p>
                                一捧香土藏奇葩，孕育种子发新芽，寄托情思千万里，一年四季绘新画；一滴细雨催鲜花，雨过天晴景色佳，朵朵相思满枝桠，千丝万缕放光华；一条短信给你发，祝你开心美潇洒，生日快乐伴随你，高枕无忧爱融洽！一捧香土藏奇葩，孕育种子发新芽，寄托情思千万里，一年四季绘新画；一滴细雨催鲜花，雨过天晴景色佳，朵朵相思满枝桠，千丝万缕放光华；一条短信给你发，祝你开心美潇洒，生日快乐伴随你，高枕无忧爱融洽！
                            </p>
                        </div>
                    </div>

                </div>
                <div class="layui-col-md4">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>拖放</h5>
                        </div>
                        <div class="ibox-content">
                            <h2>
                                标题 2
                            </h2>
                            <p>
                                一捧香土藏奇葩，孕育种子发新芽，寄托情思千万里，一年四季绘新画；一滴细雨催鲜花，雨过天晴景色佳，朵朵相思满枝桠，千丝万缕放光华；一条短信给你发，祝你开心美潇洒，生日快乐伴随你，高枕无忧爱融洽！一捧香土藏奇葩，孕育种子发新芽，寄托情思千万里，一年四季绘新画；一滴细雨催鲜花，雨过天晴景色佳，朵朵相思满枝桠，千丝万缕放光华；一条短信给你发，祝你开心美潇洒，生日快乐伴随你，高枕无忧爱融洽！
                            </p>
                        </div>
                    </div>
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>拖放</h5>
                        </div>
                        <div class="ibox-content">
                            <h2>
                                标题 4
                            </h2>
                            <p>
                                一捧香土藏奇葩，孕育种子发新芽，寄托情思千万里，一年四季绘新画；一滴细雨催鲜花，雨过天晴景色佳，朵朵相思满枝桠，千丝万缕放光华；一条短信给你发，祝你开心美潇洒，生日快乐伴随你，高枕无忧爱融洽！一捧香土藏奇葩，孕育种子发新芽，寄托情思千万里，一年四季绘新画；一滴细雨催鲜花，雨过天晴景色佳，朵朵相思满枝桠，千丝万缕放光华；一条短信给你发，祝你开心美潇洒，生日快乐伴随你，高枕无忧爱融洽！
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    <!-- Mainly scripts -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <!-- jquery UI -->
    <script src="js/jquery-ui.min.js"></script>

    <script>
         $(document).ready(function(){
            WinMove();
        });

    // Dragable panels
    function WinMove() {
        var element = "[class*=col]";
        var handle = ".ibox-title";
        var connect = "[class*=col]";
        $(element).sortable(
            {
                handle: handle,
                connectWith: connect,
                tolerance: 'pointer',
                forcePlaceholderSize: true,
                opacity: 0.8
            })
            .disableSelection();
    }

    </script>

</body>
</html>
